<template>
  <el-dialog
    v-model="dialogVisible"
    title="添加抢答"
    width="500px"
    :close-on-click-modal="false"
    :show-close="true"
    @close="handleClose"
    class="quick-answer-dialog"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="80px"
      class="quick-answer-form"
      label-position="left"
    >
      <el-form-item label="活动名称" prop="name" required>
        <el-input
          v-model="form.name"
          placeholder="请输入活动名称"
          maxlength="20"
          show-word-limit
        />
      </el-form-item>

      <el-form-item label="每次选" required>
        <div class="number-input-group">
          <el-input-number
            v-model="form.count"
            :min="1"
            :max="99"
            controls-position="right"
            class="custom-number-input"
          />
          <span class="unit">人</span>
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['close', 'submit'])

const dialogVisible = ref(true)
const formRef = ref(null)
//抢答的对象
const quick = ref({}) ;

const form = ref({
  name: '',
  count: 1
})
//可以用来获取在当前组件上定义的属性（props）
//这些属性是从父组件传递到子组件的
const props = defineProps({
  sendMessage: {
    type: Function
  }
})


const rules = {
  name: [
    { required: true, message: '请输入活动名称', trigger: 'blur' },
    { max: 20, message: '长度不能超过20个字符', trigger: 'blur' }
  ]
}

const handleClose = () => {
  emit('close')
}

const handleSubmit = async () => {
  if (!formRef.value) return ;

  await formRef.value.validate((valid) => {
    if (valid) {
      quick.value = {
        quickName: form.value.name,
        quickNum: form.value.count
      }
      props.sendMessage({
        type: 'QUICK_MESSAGE',
        data: {
          quickName: form.value.name,
          quickNum: form.value.count
        }
      })
      ElMessage.success('创建成功')
      handleClose()
    }
  })
}
</script>

<style scoped>
.quick-answer-dialog {
  :deep(.el-dialog) {
    background-color: white;
    border-radius: 8px;
  }

  :deep(.el-dialog__header) {
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
  }

  :deep(.el-dialog__body) {
    padding: 20px;
  }

  :deep(.el-form-item__label) {
    font-weight: normal;
    justify-content: flex-start;
  }

  :deep(.el-form--label-left .el-form-item__label) {
    text-align: left;
  }

  :deep(.el-form-item__label::before) {
    color: #ff4949;
  }

  :deep(.el-input__wrapper) {
    background-color: white;
  }
}

.number-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-number-input :deep(.el-input__wrapper) {
  width: 120px;
}

.unit {
  color: #606266;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 20px;
  border-top: 1px solid #eee;
}
</style>
